<script setup>
import {ref} from 'vue'

const showDialog = ref(false)
</script>

<template>
	<button @click="showDialog = true">点我打开对话框</button>
	<teleport to="body">
		<div class="dialog_mtk" v-if="showDialog">
			<div class="dialog">
				<h1>我是对话框</h1>
				<button @click="showDialog = false">点我关闭对话框</button>
			</div>
		</div>
	</teleport>
</template>

<style scoped>
.dialog_mtk {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(5,1,100,0.8);
	z-index: 999;
}

.dialog {
	background-color: chartreuse;
	padding: 10px 50px 20px;
	width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
}
</style>